<template>
    <div>
        <input type="text" v-model="message" />

        {{ message }}
        <br/><br/>
        {{ reverse_message }}

        <br><br>

        千米: <input type="text" v-model="kilometers" />
        米: <input type="text" v-model="meters" />

        <br><br>

        <div v-show="flag">
            你能看见我
        </div>

        <br/><br/>

        <div v-if="mun==9">
            mun == 9
        </div>
        <div v-else-if="mun==10">
            mun == 10
        </div>
        <div v-else>
            mun != 9 && mun != 10
        </div>

        <br><br>

        <ul>
            <li v-for="(item,index) in tlist" :class="{on:index%2 ==0,off:index%2 !=0}">
                {{ item.text }}
            </li>
        </ul>


        <br><br>

        <table>
            <tr v-for="(item,index) in datelist">
                <td>{{ item.name }}</td>
                <td>
                    <button @click="minus(index)">-</button>

                    <input type="text" v-model="item.num" />

                    <button @click="add(index)">+</button>
                </td>
            </tr>
        </table>

        <button @click="add_cart('宝马')">添加宝马</button>
        <button @click="add_cart('电脑')">添加点电脑</button>
        <br>
        {{ totalCount() }}
    </div>
</template>

<script>
    import testheader from '@/components/testheader'
    export default {
        data(){
            return {
                message:'hello world',
                kilometers:0,
                meters:0,
                flag:true,
                mun:8,
                tlist:[{text:'汽车'},{text:'面包'}], 
                datelist:[]
            }
        },
        // 定义组件标签
        components:{
            'testheader':testheader,
        },

        // 自定义方法
        methods: {
            // 汇总商品数量
            totalCount:function(){
                //默认数量
                let total = 0;
                // 遍历
                for(let i=0,l=this.datelist.length;i<l;i++){

                    total += this.datelist[i].num ;

                }
                return total;

            },
            // 减少商品数量
            minus:function(index){
                
                if (this.datelist[index].num > 0) {
                    this.datelist[index].num--;
                }
                

            },
            // 增加商品数量
            add:function(index){
                             
                this.datelist[index].num++;
         

            },

            // 添加购物车变量
            add_cart:function(name){
                
                // 声明购物车变量
                let cartlist = this.datelist

                // 声明坐标
                let findgood = 0;

                // 遍历购物车列表
                for(let i=0,l=cartlist.length;i<l;i++){

                    // 判断逻辑
                    if (name == cartlist[i]['name']) {
                        
                        cartlist[i]['num']++;
                        findgood = 1;
                        break;
                    }
                }
                if (findgood==0) {
                    cartlist.push({name:name,num:1});
                }

                // 重新赋值
                this.datelist = cartlist;
            }
        },
        // 钩子方法
        mounted() {
            console.log("这是个方法");
            
        },
        // 监听属性
        watch:{
            kilometers:function(val){
                this.kilometers = val;
                this.meters = val * 1000;
            },
            meters:function(val){
                this.kilometers = val;
                this.meters = val / 1000;
            }
        },
        // 计算属性
        computed:{
            reverse_message(){
                // 反转
                return '$'+this.message.split('').reverse().join('')
            }
        }
    }
</script>

<style>
    .on {
        background: rebeccapurple;
    }
    .off {
        background:red;
    }

</style>
